<template>
  <v-dialog v-model="internalVisible" persistent max-width="600">
    <v-card>
      <v-card-title
        class="headline bg-blue-400 text-sm text-white"
        v-html="mergedConfig.title"
      ></v-card-title>
      <v-card-text
        class="mt-8 mb-8 text-sm font-medium"
        v-html="mergedConfig.message"
      ></v-card-text>
      <v-card-actions class="bg-gray-100">
        <v-spacer></v-spacer>
        <v-btn
          :color="mergedConfig.cancelButtonColor"
          class="w-32 mr-3"
          variant="tonal"
          @click="closeDialog"
        >
          {{ mergedConfig.cancelButtonText }}
        </v-btn>
        <v-btn
          :color="mergedConfig.confirmButtonColor"
          class="w-32 font-semibold"
          variant="tonal"
          @click="confirmAction"
        >
          {{ mergedConfig.confirmButtonText }}
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watchEffect } from 'vue';
import { toRefs } from 'vue';
import type { ConfirmDialogConfig } from '@/types/comps/ConfirmDialogConfig';

const defaultConfig: ConfirmDialogConfig = {
  title: 'Submit',
  message: 'Do you really want to <b>Submit</b> form?',
  cancelButtonText: 'Cancel',
  confirmButtonText: 'Ok',
  cancelButtonColor: 'info',
  confirmButtonColor: 'error',
};

const props = defineProps<{
  visible: boolean;
  config?: Partial<ConfirmDialogConfig>;
}>();

const emit = defineEmits(['update:visible', 'close', 'confirm']);

const { visible, config } = toRefs(props);
const internalVisible = ref(props.visible);

// 合并默认值和传递的值
const mergedConfig = computed(() => ({
  ...defaultConfig,
  ...props.config,
}));

watchEffect(() => {
  internalVisible.value = visible.value;
});

watchEffect(() => {
  emit('update:visible', internalVisible.value);
});

const closeDialog = () => {
  internalVisible.value = false;
  emit('close');
};
const confirmAction = () => {
  internalVisible.value = false;
  emit('confirm');
};
</script>
